<template>
  <text class="number-countup" :style="{'--font-size': fontSizeStr, '--color': color, '--line-height': lineHeightStr}">{{numberResult}}</text>
</template>

<script>
  import { CountUp } from '../../utils/countUp';
  
  export default {
    props: {
      // 数字值
      value: {
        type: Number,
        default: 0
      },
      // 切换过渡时间
      duration: {
        type: Number,
        default: 2
      },
      // 保留的小数点
      decimal: {
        type: Number,
        default: 0
      },
      //  是否要千分位表示法
      isMillennials: {
        type: Boolean,
        default: false
      },
      //  字体大小
      fontSize: {
        type: [String,Number],
        default: 40
      },
      // 字体行高
      lineHeight: {
        type: [String,Number],
        default: 1.2
      },
      // 数字颜色
      color: {
        type: String,
        default: '#333'
      }
    },
    data() {
      return {
        numberResult: ''
      }
    },
    computed: {
      fontSizeStr() {
        if (typeof this.fontSize === 'number') {
          return this.fontSize + 'rpx';
        }
        return this.fontSize;
      },
      lineHeightStr() {
        if (typeof this.lineHeight === 'number') {
          return this.lineHeight + 'em';
        }
        return this.fontSize;
      }
    },
    
    watch: {
      value(newValue, oldValue) {
        this.countUpItem.update(newValue);
      }
    },
    
    mounted() {
      const That = this;
      this.countUpItem = new CountUp({}, this.value, {
        duration: That.duration,
        decimalPlaces: That.decimal,
        useIndianSeparators: That.isMillennials,
        plugin: {
          render(ele, result) {
            That.numberResult = result;
          }
        }
      });
      this.countUpItem.start();
    }
  }
</script>

<style lang="scss" scoped>
  .number-countup{
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--color);
  }
</style>
